<template>
  <div class="bigbox">
    <Header />
    <div class="box">
      <a href="javascript:;" class="return" @click="returnlogin"> 返回登录</a>
      <div class="center">
        <div class="icon"><img src="../../assets/图标.jpg" alt="" /></div>
        <p>找回密码</p>
        <!-- 表单 -->
        <div class="center-box">
          <input type="text" placeholder="请输入邮箱" v-model="email" /><br />
          <input
            type="text"
            placeholder="请输入验证码"
            class="verification"
            v-model="verification"
          />
          <button class="verification-b" @click="SendEmail" :disabled="dis">
            {{ email_verify }}
          </button>
          <br />
          <div class="img-eyes">
            <input
              type="password"
              placeholder="请输入新密码"
              v-model="pwd1"
              ref="inputPwd1"
            />
            <img :src="imgUrl1" class="eye1" @click="changeType1" />
          </div>
          <div class="img-eyes">
            <input
              type="password"
              placeholder="重复输入密码"
              v-model="pwd2"
              ref="inputPwd2"
            />
            <img :src="imgUrl2" class="eye2" @click="changeType2" />
          </div>
          <button class="confirm" @click="relogin">确认修改密码</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Header from "../../components/Header.vue";
export default {
  name: "ForgetPassword",
  components: {
    Header,
  },
  data() {
    return {
      email: "", //邮箱
      verification: "", //验证码
      pwd1: "", //密码
      pwd2: "", //密码
      flag1: true, //密码显示与隐藏变量
      flag2: true, //密码显示与隐藏变量
      imgUrl1: require("../../assets/close.png"), //密码显示与隐藏图片
      imgUrl2: require("../../assets/close.png"), //密码显示与隐藏图片
      wait: 60, //点击获取邮箱后，等60秒
      dis: false, //获取邮箱按钮禁用
      email_verify: "获取验证码", //获取邮箱按钮值
    };
  },
  methods: {
    // 返回登陸
    returnlogin() {
      this.$router.push({
        name: "UserLogin",
      });
    },
    // 发送验证嘛
    SendEmail() {
      //  正则邮箱
      const regEmail =
        /^[A-Za-z0-9]+([_.][A-Za-z0-9]+)*@([A-Za-z0-9-]+\.)+[A-Za-z]{2,6}$/;
      if (this.email) {
        if (regEmail.test(this.email)) {
          // 邮箱验证码符合正则，开始倒计时
          const timer = setInterval(() => {
            if (this.wait <= 0) {
              clearInterval(timer);
              this.dis = false;
              this.wait = 60;
              this.email_verify = "获取验证码";
            } else {
              this.dis = true;
              this.wait--;
              this.email_verify = "重新获取(" + this.wait + "s)";
            }
          }, 1000);
          this.$http({
            method: "post",
            url: "user/sendEmail",
            params: {
              email: this.email,
            },
          }).then(({ data }) => {
            console.log(data);
            // 返回验证码不为空则判断成功
            if (data) {
              this.$message.sucess("验证码发送成功!");
            } else {
              this.$message.info("验证码发送失败!");
            }
          });
        } else {
          this.$message.warning("邮箱格式不正确，请重新输入...");
        }
      } else {
        this.$message.warning("邮箱不能为空，请填写完整...");
      }
    },
    // 确认修改密码
    relogin() {
      // 判断表单不为空
      if (
        this.email.trim() &&
        this.pwd1.trim() &&
        this.pwd2.trim() &&
        this.verification.trim()
      ) {
        //  验证邮箱
        const regEmail =
          /^[A-Za-z0-9]+([_.][A-Za-z0-9]+)*@([A-Za-z0-9-]+\.)+[A-Za-z]{2,6}$/;
        if (regEmail.test(this.email.trim())) {
          if (this.pwd1.trim() === this.pwd2.trim()) {
            //密码(以字母开头，长度在6~18之间，只能包含字母、数字和下划线)
            const password = /^[a-zA-Z]\w{5,17}$/;
            if (password.test(this.pwd1.trim())) {
              this.$http({
                method: "post",
                headers: {
                  "content-Type": "application/json",
                },
                url: `user/forgetPassword?code=${this.verification}`,
                params: {
                  email: this.email,
                  password: this.pwd1,
                },
              }).then(({ data }) => {
                console.log(data);
                // 返回结果布尔值确认是否修改成功
                if (data.flag) {
                  console.log("修改成功!");
                  this.$message.sucess("修改密码成功！即将去往登录界面...");
                  this.$router.push({
                    name: "UserLogin",
                  });
                } else {
                   this.$message.info("修改失败!");
                }
              });
            } else {
              this.$message.warning(
                "密码以字母开头,长度在6~18之间,只能包含字母、数字和下划线,请重新输入..."
              );
              this.$router.push({
                name: "ForgetPwd",
              });
            }
          } else {
            this.$message.warning("两次密码输入不一致,请确认后重新提交...");
            this.$router.push({
              name: "ForgetPwd",
            });
          }
        } else {
          this.$message.warning("邮箱格式不正确,请重新输入...");
          this.$router.push({
            name: "ForgetPwd",
          });
        }
      } else {
        this.$message.warning("修改失败,，不允许为空，请填写完整...");
        this.$router.push({
          name: "ForgetPwd",
        });
      }
    },
    // 密码的显示与隐藏
    changeType1() {
      if (this.flag1) {
        this.$refs.inputPwd1.type = "text";
        this.imgUrl1 = require("../../assets/open.png");
        this.flag1 = false;
      } else {
        this.$refs.inputPwd1.type = "password";
        this.imgUrl1 = require("../../assets/close.png");
        this.flag1 = true;
      }
    },
    changeType2() {
      if (this.flag2) {
        this.$refs.inputPwd2.type = "text";
        this.imgUrl2 = require("../../assets/open.png");
        this.flag2 = false;
      } else {
        this.$refs.inputPwd2.type = "password";
        this.imgUrl2 = require("../../assets/close.png");
        this.flag2 = true;
      }
    },
  },
};
</script>

<style scoped>
.bigbox {
  width: 100%;
  height: 100%;
}
a {
  text-decoration: none;
  color: #666669;
}
.box {
  position: relative;
  width: 100%;
  height: 100%;

  background-color: #f6f7f9;
  /* background-image: url(../assets/newbg.png); */
}
/* 返回登录 */
.return::before {
  content: "";
  display: inline-block;
  width: 12px;
  height: 12px;
  border-top: 2px solid black;
  border-left: 2px solid black;
  transform: rotate(-45deg);
}
.return {
  position: absolute;
  top: 20px;
  left: 40px;
  font-size: 20px;
}
/* 中间大盒子 */
.center {
  position: absolute;
  /* top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto; */
  left: 50%;
  top: 47%;
  transform: translate(-50%, -50%);
  /* 以上两种方法皆为盒子在页面内居中 */
  width: 450px;
  height: 475px;
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 20px;
  padding: 20px;
}
/* 图标 */
.icon {
  width: 130px;
  margin: 0 auto;
  /* background-color: pink; */
}
.icon img {
  width: 100%;
}
/* 找回密码 */
p {
  margin-left: 40px;
  font-size: 20px;
}
/* 表单 */
.center-box {
  position: relative;
  left: 15%;
}
input {
  width: 300px;
  height: 45px;
  font-size: 20px;
  outline: none;
  margin-top: 20px;
  border-radius: 15px;
  padding-left: 20px;
  border: 1px solid #dfdfe1;
}
.verification {
  width: 160px;
}
.verification-b {
  margin-left: 10px;
  width: 130px;
  height: 45px;
  border-radius: 15px;
  border: 0;
  font-size: 20px;
  background-color: skyblue;
}
.verification-b:hover {
  cursor: pointer;
}
.confirm {
  width: 150px;
  height: 45px;
  margin: 20px 0 0 75px;
  font-size: 20px;
  border-radius: 15px;
  border: 0;
  background-color: skyblue;
  font-weight: 700;
  color: rgb(61, 59, 59);
}
.img-eyes {
  position: relative;
}
.eye1 {
  position: absolute;
  top: 28px;
  right: 150px;
  z-index: 1;
  width: 30px;
  height: 30px;
}
.eye2 {
  position: absolute;
  top: 30px;
  right: 150px;
  z-index: 1;
  width: 30px;
  height: 30px;
}
</style>